<template>
  <el-container direction="vertical" class="admin-container">
    <admin-header />
    <el-container>
      <aside-menu />
      <el-main class="content-container">
        <div class="content-tag-view">
          <top-tag-view />
        </div>
        <transition name="fade">
          <router-view />
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
// lib
// components & widgets
import AdminHeader from "./AdminHeader.vue";
import AsideMenu from "./AsideMenu.vue";
import TopTagView from "../Layout/TopTagView/Main.vue";
// config
// script
import GoEasy from "@/public/lib/GoEasy";
// controller & service
import pushService from "@/biz/push/push.service";
import { getAreaDataService } from "@/biz/area/service";
// interface
import { StoreState } from "@/store";
// 其它

@Component({
  components: {
    AdminHeader,
    AsideMenu,
    TopTagView,
  },
})
export default class Home extends Vue {
  mounted() {
    // GoEasy
    GoEasy.open(this.accountId, pushService.messageListener);
    // 获得地区数据
    getAreaDataService();
  }
  beforeDestroy() {
    GoEasy.close(this.accountId);
  }
  get accountId() {
    const state: StoreState = this.$store.state;
    return state.account.account.id;
  }
}
</script>

<style lang="scss">
.admin-container {
  height: 100%;
}
.content-container {
  padding: 0 15px 15px 15px !important;
  display: flex !important;
  flex-direction: column;
}
.content-tag-view {
  margin: 10px 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.4s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}
</style>
